Manually Updating the Cache Using updateQueryData in RTK Query
updateQueryData is a powerful RTK Query utility that allows you to manually modify cached query results without refetching data from the server. It’s useful for keeping the UI in sync with user actions such as adding, editing, or deleting items locally.
1. Import
api.util.updateQueryData: Access the utility from your RTK Query API slice.2. Dispatch the Update: Call
dispatch(api.util.updateQueryData(endpointName, args, updateCallback)).3. Modify the Draft Data: The callback receives an Immer-powered draft of the cached data, allowing safe direct mutations.
In this example, after successfully adding a new post, updateQueryData appends it directly to the getPosts cache. This eliminates the need to refetch data from the server, keeping the UI instantly updated.
- Instant UI Updates: Reflects local changes immediately without waiting for a new query response.
- Reduced API Load: Avoids redundant network calls for small updates.
- Fine-Grained Control: Enables precise cache manipulation for complex state updates.
By using updateQueryData, you can efficiently manage cached state in RTK Query and maintain a smooth, real-time user experience without unnecessary refetching.